
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./js/bootstrap-3.4.1/css/bootstrap.min.css">
		<link rel="stylesheet" href="./js/bootstrap-3.4.1/css/bootstrap-theme.min.css">
		
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="./js/bootstrap-3.4.1/js/bootstrap.min.js"></script>
	</head>
	<body>

		<table class="table table-striped table-bordered table-hover table-condensed">
			<thead>
				<tr class="active">
					<th>姓名</th>
					<th>姓名</th>
					<th>身份证号</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr class="info">
					<td>王星星</td>
					<td>男</td>
					<td>6103262000009300458</td>
					<td>
						<button class="delbtn ">删除</button>
						<button class="movebtn ">修改</button>
						<button class="viewbtn ">查看</button>
					</td>
				</tr>
				<tr class="warning">
					<td>李明明</td>
					<td>女</td>
					<td>6103261999093068596</td>
					<td>
						<button class="delbtn ">删除</button>
						<button class="movebtn ">修改</button>
						<button class="viewbtn ">查看</button>
					</td>
				</tr>
				<tr class="success">
					<td>张天天</td>
					<td>男</td>
					<td>6103262000007327593</td>
					<td>
						<button class="delbtn ">删除</button>
						<button class="movebtn ">修改</button>
						<button class="viewbtn ">查看</button>
					</td>
				</tr>
				<tr class="danger">
					<td>程嘻嘻</td>
					<td>女</td>
					<td>6103262001022295878</td>
					<td>
						<button class="delbtn ">删除</button>
						<button class="movebtn ">修改</button>
						<button class="viewbtn ">查看</button>
					</td>
				</tr>
				<tfoot>
					<tr>
						<td colspan="4">
							<center><button class="addbtn ">增加</button></center>
						</td>
					</tr>
				</tfoot>

			</tbody>
		</table>
<!--增加的模态框-->
			<div class="modal addfade" id="addmodal">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<i>X</i>
							<h4>成员管理</h4>
						</div>
						<div class="modal-body">
							<p>
								姓名：<input type="text" />
							</p>
							<p>
								姓别：<input type="text" />
							</p>
							<p>
								身份证号：<input type="text" />
							</p>
						</div>
						<div class="modal-footer">
							<button class="addbtn_ok">确定</button>
							<button class="addbtn_no">取消</button>
						</div>
					</div>
				</div>
			</div>
			
			
			
			<!--修改的模态框-->
			<div class="modal movefade movemodal" id="movemodal">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<i>X</i>
							<h4>成员管理</h4>
						</div>
						<div class="modal-body">
							<p>
								姓名：<input type="text" />
							</p>
							<p>
								姓别：<input type="text" />
							</p>
							<p>
								身份证号：<input type="text" />
							</p>
						</div>
						<div class="modal-footer">
							<button class="addbtn_ok">确定</button>
							<button class="addbtn_no">取消</button>
						</div>
					</div>
				</div>
			</div>
			
			
			
			<!--查看的模态框-->
			<div class="modal viewfade" id="viewmodal">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<i>X</i>
							<h4>成员管理</h4>
						</div>
						<div class="modal-body">
							<p>
								姓名：<span></span>
							</p>
							<p>
								姓别：<span></span>
							</p>
							<p>
								身份证号：<span></span>
							</p>
						</div>
						<div class="modal-footer">
							<button class="addbtn_no">取消</button>
						</div>
					</div>
				</div>
			</div>
			
			
			
			
			
			
		</div>	
		
		<script>
			$(function(){
				
				//增加
				var arrAdd=[]
				$(document).on("click",".addbtn",function(){
					
					$(".addfade").fadeIn(600)
				})
				//增加确定
				$(document).on("click",".addbtn_ok",function(){
					$(".addfade").fadeOut(600)
					arrAdd=[]
					$('#addmodal').find("input").each(function(){
						arrAdd.push($(this).val())
						
					})
					var str='<tr><td class="name">'+arrAdd[0]+'</td><td class="sex">'+arrAdd[1]+'</td><td class="age">'+arrAdd[2]+'</td><td><button class="delbtn ">删除</button> <button class="movebtn ">修改</button> <button class="viewbtn ">查看</button></td></tr>'
					$("tbody").append(str)
					$('#addmodal').find("input").val('')
				})
				
				$(document).on("click",".addbtn_no",function(){
					$(".addfade").fadeOut(600)
				})
				
				$(document).on("click",".modal-header i",function(){
					$(".addfade").fadeOut(600)
				})
				
				
				
				//删除
				var del=[]
				$(document).on("click",".delbtn",function(){
					del=[]
					if(confirm("确定删除吗？")){
						$(this).parents("tr").fadeOut(300)
					}
				})
				
				
				//修改
				var arrMove=[];
				var _this = null ;
				$(document).on("click",".movebtn",function(){
					arrMove=[]
					_this=$(this).parents("tr")
					$(".movefade").fadeIn(600)
					$(this).parent().siblings().each(function(){
						arrMove.push($(this).text())
						
					})
					
					$(this).parents().find('.movemodal input').each(function(i){
						$(this).val(arrMove[i])
						
					})
 
					
					
				})
				
				//修改确定
				$(document).on("click",".addbtn_ok",function(){
					arrMove=[]					
					$(this).parent().siblings().find('input').each(function(){
						arrMove.push($(this).val())
						console.log($(this))
					})
					console.log(arrMove)
					$(this).parents().find('.movemodal input').each(function(i){
						$(this).val(arrMove[i])
						
					})
					
					_this.find("td").each(function(i){
						$(this).text(arrMove[i])
					})
					
					$(".movefade").fadeOut(600)
				})
				//修改取消
				$(document).on("click",".addbtn_no",function(){
					$(".movefade").fadeOut(600)
				})
				
				$(document).on("click",".modal-header i",function(){
					$(".movefade").fadeOut(600)
				})
				
				
				//查看
				var arrView=[]
				$(document).on("click",".viewbtn",function(){
					arrView=[]
					$(".viewfade").fadeIn(600)
					$(this).parent().siblings().each(function(){
						arrView.push($(this).text())
					})
					$(".modal-body").find("p span").each(function(i){
						$(this).text(arrView[i])
						console.log(arrView)
					})
					
					
				})
				
				//查看取消
				$(document).on("click",".addbtn_no",function(){
					$(".viewfade").fadeOut(600)
				})
				
				$(document).on("click",".modal-header i",function(){
					$(".viewfade").fadeOut(600)
				})
			})
			
		</script>
	</body>
</html>